<script setup lang="ts">
import { ref } from 'vue'
import MachineControl from './components/MachineControl.vue'
import MoreControl from './components/MoreControl.vue'
import DataMonitor from './components/DataMonitor.vue'
import openPanel from '@/assets/bit-screen/schedule-mge/open_r.png'
import closePanel from '@/assets/bit-screen/schedule-mge/close_r.png'
import FlyStatus from './components/FlyStatus.vue'
import CustomBox from './components/CustomBox.vue'
import TaskDispatchModel from './components/TaskDispatchModel.vue'

const drawer = ref(false)
const secondModel = ref<boolean>(false)
const toggleDrawer = () => {
  drawer.value = !drawer.value
}
// 从子组件接收到的选择的航线值
const airlineValue = ref('')
// 取消选择航线
const cancelAirline = () => {
  airlineValue.value = ''
}
</script>
<template>
  <img
    class="side-icon"
    @click="toggleDrawer"
    :class="[drawer ? 'isOpen' : 'isClose']"
    v-if="!drawer"
    :src="openPanel"
    alt=""
  />
  <img
    class="side-icon"
    @click="toggleDrawer"
    :class="[drawer ? 'isOpen' : 'isClose']"
    v-else
    :src="closePanel"
    alt=""
  />
  <div class="rt-con" :class="[drawer ? 'rt-isOpen' : 'rt-isClose']">
    <div class="taskDispatch">
      <div class="taskLeft">
        <div class="title" @click="secondModel = true">任务下发:</div>
        <div class="check-box">
          <el-popover
            popper-style="padding:0;background: none;color:white;border: none;"
            offset="20"
            v-if="!airlineValue"
            placement="left-start"
            :width="317"
            trigger="hover"
          >
            <template #reference>
              <div class="check-line flex justify-between items-center w-[100%]"
                >请选择航线
                <Icon class="icon1" icon="svg-icon:left" :size="18" />
                <Icon class="icon2" icon="svg-icon:bottom" :size="18" />
              </div>
            </template>
            <TaskDispatchModel v-model:value="airlineValue" />
          </el-popover>
          <el-checkbox
            checked
            v-else
            :label="'' + airlineValue"
            size="large"
            @change="cancelAirline"
          />
        </div>
      </div>
      <div class="taskRight"> 下发<br />任务</div>
    </div>
    <FlyStatus />
    <MachineControl />
    <MoreControl />
    <CustomBox title="任务下发">
      <DataMonitor />
    </CustomBox>
  </div>
</template>

<style lang="less" scoped>
:deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
  background: rgba(7, 143, 216, 0.4);
  border: 1px solid #0092ff;
}
:deep(.el-checkbox__label) {
  color: white !important;
}
:deep(.el-radio__label) {
  color: white !important;
}
:deep(.el-radio__inner) {
  background-color: white;
}

html.dark{
  --el-border-color-lighter: none !important;
}
.side-icon {
  position: absolute;
  z-index: 2001;
  top: 37.5%;
  right: 14px;
  transform: translateY(-50%);
  height: 20.5%;
  cursor: pointer;
}
.isOpen {
  position: absolute;
  right: calc(20% + 15px);
  z-index: 2001 !important;
}
.rt-isOpen {
  z-index: 2001;
  right: 15px;
}
.rt-isClose {
  z-index: -1;
  width: 0;
  position: absolute;
}
.rt-con {
  width: 20%;
  position: absolute;
  background: rgba(9, 36, 74, 0);
  height: 98%;
  overflow: auto;
  top: 5px;
  .taskDispatch {
    display: flex;
    justify-content: space-between;
    height: 8%;
    margin-bottom: 4px;
    margin-top: 7px;

    .taskLeft {
      flex: 1;
      font-weight: 500;
      box-sizing: border-box;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      margin-right: 10px;

      .title {
        background: #398fed;
        padding: 0 13px;
        height: 46%;
        display: flex;
        align-items: center;
      }
      .check-box {
        background: #143553;
        height: 44%;
        display: flex;
        align-items: center;
        padding-left: 13px;
        .icon2 {
          display: none;
        }
        .check-line {
          font-size: 15px;
          &:hover {
            cursor: pointer;
            .icon1 {
              display: none;
            }
            .icon2 {
              display: block;
            }
          }
        }
      }
    }
    .taskRight {
      width: 18%;
      background: linear-gradient(0deg, #5d8ad2, #3b92ef, #386fc9);
      box-shadow: 1px 8px 18px 0px rgba(0, 4, 63, 0.01);
      border-radius: 4px;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
    }
  }
}
@media screen and (max-width: 1600px) {
  .rt-isOpen {
    width: 27%;
    z-index: 2001;
    position: absolute;
    right: 15px;
    top: 0px !important;
    background: rgba(9, 36, 74, 0);
    height: 98%;
    box-shadow: none;
  }
  .isOpen {
    position: absolute;
    right: calc(27% + 15px);
    z-index: 9999 !important;
  }
}
/* 当视口高度大于或等于880px时，应用这些样式 */
@media screen and (min-height: 950px) {
  .side-icon {
    top: 34.3%;
    height: 18.7%;
  }
}
/* 当视口高度大于或等于880px时，应用这些样式 */
@media screen and (max-height: 750px) {
  .side-icon {
    top: 45% !important;
    height: 26%;
  }
}
</style>
